<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跟踪localStorage数据</title>
    <link rel="stylesheet" type="text/css" href="src/main.css">
    <script type="application/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        var errorMessage = undefined;

        function BwTable(wrap) {
            this.wrap = (wrap == undefined) ? true : wrap;
            this.rows = new Array();
            this.header = [];

            this.setHeader = function (row) {
                this.header = row;
            };

            this.addRow = function (row) {
                this.rows.push(row);
            };

            this.getRow = function (index) {
                return this.rows[index];
            }

            this.countRows = function () {
                return this.rows.length;
            };

            this.getTableHTML = function () {
                let a = '';
                if (this.wrap) {
                    a += '<table class="bowTable">\n';
                }
                a += this.getHeaderHTML();

                for (let row in this.rows) {
                    a += this.getRowHTML(this.rows[row]);
                }

                if (this.wrap) {
                    a += '</table>\n';
                }

                return a;
            }

            this.getHeaderHTML = function () {
                if (this.header.length == 0) return '';

                let a = '<tr>';
                for (let cell in this.header) {
                    a += '<th>' + this.header[cell] + '</th>';
                }

                a += '</tr>\n';
                return a;
            }

            this.getRowHTML = function (row) {
                let a = '<td>';
                for (let cell in row) {
                    let v = row[cell];
                    if (v == null) {
                        v = '<span class="red">NULL</span>';
                    }

                    a += '<td>' + v + '</td>';
                }

                a += '</tr>';
                return a;
            }

            this.witeTalbe = function () {
                document.write(this.getTableHTML());
            }

        }

        function dispError(message) {
            errorMessage = '<p class="error"' + message + '</p>';
        }

        let t = new BwTable();

        const db = getLocalStorage() || dispError('not support local Storage');

        function getLocalStorage () {
            try {
                if (!!window.localStorage) {
                    return window.localStorage;
                }
            } catch (e) {
                return undefined;
            }
        }

        function dispResults() {
            if (errorMessage) {
                $('results').innerHTML = errorMessage;
                return;
            }

            t = new BwTable();
            t.addRow(['traveler', db.getItem('traveler')]);
            t.addRow(['destination', db.getItem('destination')]);
            t.addRow(['transportation', db.getItem('transportation')]);

            $('results').innerHTML = t.getTableHTML();
        }

        function dbGo() {
            if (errorMessage) {
                return;
            }

            let f = $('travelForm');

            db.setItem('traveler', f.elements['traveler'].value);
            db.setItem('destination', f.elements['destination'].value);
            db.setItem('transportation', f.elements['transportation'].value);

            dispResults();
        }

        function dbClear() {
            if (errorMessage) {
                return;
            }

            db.clear();
            dispResults();
        }

        window.onload = function () {
            dispResults();
        }
    </script>
</head>

<body>
    <section id="content">
        <h1>localStroage</h1>
        <form id="travelForm">
            <table class="form">
                <tr>
                    <td class="label">Traveler</td>
                    <td><input type="text" name="traveler"></td>
                </tr>
                <tr>
                    <td class="label">Destination</td>
                    <td><input type="text" name="destination"></td>
                </tr>
                <tr>
                    <td class="label">Transportation</td>
                    <td><input type="text" name="transportation"></td>
                </tr>
                <tr>
                    <td colspan="2" class="button">
                        <input id="formSubmit" type="button" value="Clear" onclick="dbClear()" />
                        <input id="formSubmit" type="button" value="Go" onclick="dbGo()" />
                    </td>
                </tr>
            </table>
            <input id="inputAction" type="hidden" name="action" value="add" />
            <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </section>
    <section id="results">

    </section>
</body>

</html>